<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid布局</title>
</head>
<body>
    <!-- 
        grid布局：将网页分为一个个网格，可以任意组合不同的网格，作出不同的布局
            1. grid布局 和 flex布局
                flex布局是轴线布局，只能指定项目针对轴线的位置——一维布局
                grid布局时将容器分为行和列，然后指定项目所在的单元格——二维布局
            2. 基本概念
                a. 容器 container
                b. 项目 item
                    注意：项目只能是容器的顶层子元素
                c. 行 row
                d. 列 column
                e. 单元格 cell
                f. 网格线 grid line   划分网格的线

            3. 容器属性
                a. display: grid
                b. grid-template-columns: 100px 100px 100px;   [指定列宽]  (可以用绝对单位 也可以用百分比)
                   grid-template-rows: 100px 100px 100px;   [指定行宽]  (可以用绝对单位 也可以用百分比)
                        写法：
                            1) repeat()         repeat(2, 100px 20px 80px);     
                            2) auto-fill()      repeat(auto-fill, 100px);
                            3) fr
                            4) minmax()
                            5) auto 关键字
                            6) 网格线的名称
                c. grid-row-gap 行与行间隔 
                   grid-column-gap 列与列间隔
                   grid-gap [1 2简写]

                d. grid-template-areas   [指定区域]
                e. grid-auto-flow: row | column | row dense | column dense   [排列方式]
                f. justify-items  水平位置 左中右
                    align-items  垂直位置 上中下
                    place-items  [1 2简写]
                g. grid-auto-columns 
                   grid-auto-rows

                h. grid-template 
                   grid 

            4. 项目属性
                a. grid-column-start 
                   grid-column-end 
                   grid-row-start 
                   grid-row-end 
                b. grid-column 
                   grid-row 
                c. grid-area 
                d. justify-self 
                   align-self 
                   place-self 
     -->
</body>
</html>